<!--
 * @Date: 2021-08-06 15:21:58
 * @LastEditTime: 2021-08-17 11:30:26
-->
<template>
  <div class="app-container">
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
      <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        刷新
      </el-button>
    </form-selections>
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column type="index" align="center" label="序号" width="55" />
        <el-table-column label="登陆用户" prop="login_name" />
        <el-table-column prop="login_ip" label="登陆IP" />
        <el-table-column prop="browser" label="客户端" />
        <el-table-column prop="os" label="系统" />
        <el-table-column prop="status" label="登录状态">
          <template slot-scope="item">
            <el-tag v-if="item.row.status === 1" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="login_at" label="登陆时间">
          <template slot-scope="data">
            {{ formatLoginTime(data.row.login_at) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination class="pagination-container" background :current-page="paginate.current" hide-on-single-page :page-sizes="paginate.sizes" :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 200, 300, 400, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import { parseTime } from '@/utils'
import cacheList from '@/layout/mixin/cacheList'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'SystemLogLogin',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 335,
      componentName: 'SystemLogLogin',
      url: 'log/login',
      queryParam: {
        start_at: '',
        end_at: ''
      },
      selectedIds: [],
      formItems: [
        {
          label: '拉取时间',
          key: 'date',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
        }
      ]
    }
  },
  methods: {
    formatLoginTime(time) {
      return parseTime(time)
    },
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      if (vm.queryParam.date && vm.queryParam.date.length > 0) {
        vm.queryParam.start_at = vm.queryParam.date[0]
        vm.queryParam.end_at = vm.queryParam.date[1]
      }
    }
  }
}
</script>

<style scoped>
.filter-container {
  border: none;
}
</style>
